iT邦幫忙

2026 iThome 鐵人賽

DAY 1
0
Modern Web

Laravel Filament 從入門到實戰系列 第 1

Day 00:Laravel Filament 從入門到實戰,30 天規劃

  • 分享至 

  • xImage
  •  

第一次看到這系列文章的你,如果你已經寫過幾個 Laravel 專案,大概都經歷過同一個階段。功能做得差不多了,客戶或主管突然問一句,那後台管理介面呢,能不能讓我們自己上架商品、改改訂單狀態、看看每天的銷售數字。這句話聽起來輕描淡寫,實際上往往是整個專案裡最花時間、卻又最不容易被看見成就感的一塊工作。

多數人第一次面對這個需求,選擇自己動手刻一套後台,Blade 頁面一個一個疊,表單驗證一條一條寫,權限判斷散落在各個 Controller 裡。做到第三、第四個模組,會開始注意到自己在重複寫幾乎一樣的 CRUD 邏輯,只是欄位名稱不同。這時候你可能聽過 Filament 這個名字,看過幾張漂亮的後台截圖,但親手用過的人不多,網路上找得到的中文教學也大多停在「安裝完,做一個 Resource,結束」,沒有真正走到權限、多租戶、儀表板這些正式上線前必須處理的部分。

這個系列要補上的,正是這段空白。

這個系列要帶你做的事

這個系列不會示範怎麼寫出一個功能展示用的 Demo 後台,做完就丟著積灰塵。目標是帶你從安裝 Filament 的第一天開始,一路做出一套具備多角色權限、多租戶資料隔離、自訂儀表板,並且通過測試、準備好上線的正式後台管理系統。

做法是全系列共用同一個示範專案,一間寵物用品批發商的後台管理系統,涵蓋商品、訂單、客戶、庫存、報表五個模組。每天做的事情,都疊加在前一天已經完成的基礎之上,而不是每天各自獨立、做完就結束的功能展示。你會眼睜睜看著這套後台從第一天只有一個陽春的 Resource,一天一天長成一個真正能交給客戶使用的系統。

系列會刻意保留一個模組,報表模組,一直到系列尾聲才開始動手。這是有意的安排,用意是在 30 天累積了一套建置流程之後,現場驗證這套流程能不能真的套用到一個全新的模組上,而不是每個模組都要重新摸索一次,這也是檢驗這 30 天有沒有真的教會你東西的方式。

目標讀者,以及不是為誰寫的

這個系列假設讀者已經具備實際的 Laravel 開發經驗,熟悉 Eloquent、Migration、Route、Middleware 這些核心概念,系列不會重新解釋 Laravel 本身怎麼運作,會把篇幅完全留給 Filament。你可能還沒用過 Filament,或者只在別人的專案裡看過畫面,這正是系列鎖定的起點。手上如果剛好有一個現有專案,正在猶豫要不要導入 Filament 取代自己手刻的後台,這個系列會特別有感,因為每個階段都會回頭呼應這類真實的導入決策。

如果你對 Laravel 本身還不熟,這個系列不會是最適合你的起點,建議先把 Eloquent 與路由這些基礎打穩,再回來會順暢很多。

為什麼是 Filament

在攤開 30 天地圖之前,先把第一天才會展開的問題稍微說在前面,方便你判斷這個系列值不值得投入 30 天。

手刻後台的問題不在於做不出來,而在於每加一個模組,就要重新走一次表單、驗證、列表、權限這整套流程,工時隨模組數量不斷增加,維護成本也是。市面上其他後台套件不是沒有,但要嘛客製化彈性有限,要嘛與 Laravel 生態的整合不夠深。

Filament 選擇的做法,是深度綁定 Laravel 既有的 Eloquent 與 Policy 機制,用宣告式的方式定義表單與表格欄位,讓一個 Resource 從骨架到完整功能的距離大幅縮短,同時保留足夠的擴充點供客製化。這句話背後具體的取捨細節,留給 Day 1 正式展開,這裡只需要記住一個方向,選擇 Filament,賭的是「開發速度」與「客製化彈性」能不能兼得,而這 30 天要驗證的,正是這個賭注成不成立。

30 天完整地圖

以下依八個階段分組呈現整個系列的全貌。每個階段標題下方先說明這個階段要讓你建立起什麼樣的能力,再列出該階段每一天的標題與一句話定位。閱讀當下不需要理解每一天的技術細節,只需要對整體節奏有個印象,等你實際走到某一天,回來這裡對照一下自己的位置即可。

階段一:動機與地基,Day 01 - Day 03

三天,目標是讓你講得出什麼情況下該選 Filament、什麼情況下不該,並且完成安裝、建立第一個 Panel,做出第一個具備基本 CRUD 功能的 Resource。

  • 《Day 01:為什麼是 Filament,跟手刻後台與其他套件比起來差在哪》,建立導入決策依據,定案全系列共用的示範情境
  • 《Day 02:安裝與第一個 Panel,認識這個後台入口容器》,完成環境安裝,定義 Panel 這個容器概念
  • 《Day 03:建立第一個 Resource,五分鐘做出一套 CRUD 介面》,建立商品管理 Resource,走完列表、建立、編輯、檢視四頁

階段二:表單與表格,Day 04 - Day 08

五天,是系列中份量最重的技術操作階段之一,目標是讓你熟練建置一個貼近真實業務需求的表單與表格,包含各類欄位型別、篩選、排序、批次操作,以及掛載操作按鈕。

  • 《Day 04:表單欄位全解析,從文字輸入到日期選擇器》,建立表單常見欄位型別的操作手感
  • 《Day 05:表單版面配置,用 Schema 排出一份不擁擠的表單》,處理欄位分組、分頁、條件顯示
  • 《Day 06:表格欄位怎麼呈現,格式化與縮圖顯示》,處理表格欄位的呈現方式與資料格式化
  • 《Day 07:讓大量資料可用,篩選、排序與搜尋》,補齊表格面對大量資料時的可用性機制
  • 《Day 08:Action 是什麼,表格列、頁首、表單內三種掛載位置》,串起三種操作掛載情境

階段三:資料關聯,Day 09 - Day 12

四天,目標是讓你在 Filament 介面上正確呈現與操作一對多、多對多關聯,讓商品、訂單、客戶、庫存這幾個模組真正串成一個系統,而不是各自獨立的孤島。

  • 《Day 09:表單裡選關聯資料,下拉選單背後在做什麼》,處理表單裡關聯欄位的選擇與建立情境
  • 《Day 10:表格裡顯示關聯資料,一眼看出這張訂單屬於哪個客戶》,處理表格欄位呈現關聯資料的方式
  • 《Day 11:Relation Manager,訂單明細這種巢狀資料怎麼管理》,處理需要獨立子介面的關聯情境
  • 《Day 12:把商品、訂單、客戶串起來,第一次像個真正的系統》,本階段收尾,三個模組關聯正式串接完成

階段四:驗證、生命週期鉤子與權限地基,Day 13 - Day 15

三天,目標是讓你補齊表單驗證的細節規則,理解資料儲存前後可以掛載自訂邏輯的位置,並讓 Filament 讀取 Laravel 既有的 Policy 判斷操作權限。

  • 《Day 13:表單驗證不只是必填,跨欄位規則怎麼寫》,補齊驗證規則的細節與跨欄位驗證情境
  • 《Day 14:儲存前後可以掛什麼,庫存異動的自動計算》,處理資料儲存前後的生命週期掛載點
  • 《Day 15:接上 Laravel 既有的 Policy,誰能看見這個操作按鈕》,為角色權限鋪路

階段五:多角色權限與多租戶,Day 16 - Day 18

三天,目標是讓你設計出貼近真實團隊結構的角色權限,區分倉管、業務、財務等不同角色能看到與操作的範圍,並讓後台依組織範圍隔離資料。

  • 《Day 16:設計一份貼近真實團隊的角色權限矩陣》,把倉管、業務、財務的權限差異落實到 Policy
  • 《Day 17:多租戶隔離,讓每個經銷據點只看到自己的資料》,定案多租戶隔離錨點
  • 《Day 18:權限與租戶疊加時,驗證兩者不互相打架》,本階段收尾

階段六:Widget 與客製化儀表板,Day 19 - Day 21

三天,目標是讓你打造一個由統計數字、圖表、自訂內容組成的儀表板首頁,把系列前面累積的資料轉化成管理者一眼就能看懂的畫面。

  • 《Day 19:第一個 Widget,把訂單數字擺上首頁》,介紹統計數字類型的 Widget
  • 《Day 20:圖表 Widget,讓庫存與訂單趨勢一眼看懂》,處理圖表類型的 Widget
  • 《Day 21:誰登入看到誰的儀表板,Widget 排版與權限呼應》,本階段收尾

階段七:效能、測試與部署前準備,Day 22 - Day 25

四天,目標是讓你處理表格資料量變大之後的效能問題,補齊 Panel 的自動化測試,並完成上線前必要的設定調整。

  • 《Day 22:資料變多之後,表格為什麼開始變慢》,處理大量資料下的查詢與渲染效能問題
  • 《Day 23:檔案上傳與資料匯入匯出,正式環境常踩的坑》,處理檔案處理與批次匯入匯出功能
  • 《Day 24:幫 Panel 寫測試,Testable 方法組合怎麼用》,示範基本自動化測試
  • 《Day 25:上線前檢查清單,環境變數、快取與佇列》,收斂部署前容易被忽略的正式環境差異

階段八:實戰整合收尾,Day 26 - Day 30

五天,是系列的收尾階段,目標是讓你看到前面七個階段的成果被整合進同一個示範專案的完整樣貌,並透過補上報表模組這個尚未處理過的模組,驗證這套系統化建置流程是否真的能套用到新模組上,最後為系列畫下句點。

  • 《Day 26:報表模組從零開始,從需求到 Resource 骨架》,驗證系列建立的流程可複製性
  • 《Day 27:報表模組加上圖表與篩選條件》,延續上一天,把數字轉化成可視化的報表
  • 《Day 28:報表模組接上權限與租戶隔離,完工》,完成報表模組,串接既有的權限與多租戶機制
  • 《Day 29:全系列整合驗收,跑一次從新增商品到產生報表的完整流程》,端到端驗證五個模組共同運作
  • 《Day 30:完賽總結,Filament 的限制與不適合的情境》,呼應 Day 01 的決策依據,誠實檢討限制,系列收尾

小結:這套地圖存在的意義

30 天的天數配置刻意不均分,這是一套有意識設計的建置順序。表單與表格這個階段確實需要比其他階段更多篇幅,因為那是日常使用 Filament 時最頻繁碰到的部分。報表模組刻意保留到系列尾聲才動手,不是湊天數,而是要在 30 天累積出一套建置流程之後,現場驗證這套流程真的可以複製到新模組,而不只是紙上談兵。你在後面某一天如果覺得進度卡住,回來對照這份地圖,通常能立刻看出自己是在哪個階段的哪個環節卡關,不必漫無目的地往前翻。

這份地圖上的每一格,都是為了兌現一個承諾,把「導入一套後台管理系統」這件事,從一場每個模組都要重新摸索的重複勞動,變成一套有架構可依循的系統性建置流程。這件事光看地圖還無法被說服,需要跟著往下走,一步一步驗證每個階段是不是真的兌現了承諾。

明天我們將正式進入 Day 01,把「為什麼是 Filament」這個問題,攤開來看清楚。


下一篇
Day 01:為什麼是 Filament,跟手刻後台與其他套件比起來差在哪
系列文
Laravel Filament 從入門到實戰4
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
ReccaChao
iT邦研究生 4 級 ‧ 2026-09-14 23:58:05

如果需要 Laravel 基礎教學,歡迎看 我推的Laravel S2! 系列

https://ithelp.ithome.com.tw/users/20163286/ironman/9182

我要留言

立即登入留言